<template>
  <div id="deliverydetailslist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

                <el-table-column :label="variable_name4 + '编号'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column> 
                <el-table-column :label="variable_name4 + '价值'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.final_price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="获取时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.receive_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产出时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.produced_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="交割时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.updatetime }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align='center' width="320px"  fixed="right">
                    <template slot-scope="scope">
                        <el-button   size="mini"  type="primary"  plain @click="hf_but(scope.row)">恢复</el-button> 
                        <el-button   size="mini"  type="primary"  plain @click="sh_but(scope.row)">收获</el-button> 
                         <el-button   size="mini"  type="primary"  plain @click="split_but(scope.row)">拆分</el-button> 
                        <el-button   size="mini"  type="primary"  plain @click="substitution_but(scope.row)">置换{{ variable_name1 }}</el-button>
                    </template>
                </el-table-column>

 
            </el-table>  


             <!-- 置换果米 -->
            <el-dialog :title="'置换' + variable_name1" :visible.sync="substitution_mtk"  width="400px">
                <div style="width:100%;"> 

                        <el-form ref="form"   label-width="50px" style="width:100%;">
                    
                            <el-form-item label="" label-width="0">
                                <el-input    v-model="substitution_form.gm" placeholder="请输入"></el-input>
                            </el-form-item>
                    </el-form>
                        <div style="text-align: center;width:50%;margin:auto;">
                                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="substitution_but_qr()">确认</el-button>
                        </div>
                </div> 
            </el-dialog>

               <!-- 拆分申请 -->
            <el-dialog title="拆分申请" :visible.sync="split_mtk"  width="700px" :close-on-click-modal="false">
                <el-form ref="form"  label-width="80px">  
                        <el-row> 
                            <el-col :span="24" style="display:flex;">
                                    <div class="mytitle_item" style="margin-bottom:0px;">
                                        <el-form-item label="申请价值" style="margin-bottom:0px !important;">
                                            <el-input v-model.number="all_number1" readonly="readonly" class="my_input"></el-input>
                                        </el-form-item>
                                    </div>
                            </el-col>  
                        </el-row> 
                        <el-row> 
                            <el-col :span="24" style="display:flex;margin-top:10px;">
                                    <div class="mytitle_item" style="margin-bottom:0px;">
                                        <el-form-item :label="variable_name1 + '数量'" style="margin-bottom:0px !important;">
                                            <el-input v-model.number="all_gm" @blur="chage_input"  class="my_input"></el-input>
                                        </el-form-item>
                                    </div>
                            </el-col>  
                        </el-row>
                </el-form>
                
                <div class="mytitle_item" style="margin-top:20px;">
                        <span style="padding-left:15px;">{{ variable_name4 }}数量：{{ nums }}</span>
                 </div>

                <div class="mytitle_item" style="margin-top:20px;">
                        <span style="padding-left:15px;">拆分{{ variable_name4 }}：{{ all_number }}</span>
                 </div>

              <div class="demo" >
                    <div style="width:100%;"> 
                        <el-form ref="form" :model="datalistarr" label-width="50px" style="width:100%;">
                            <div style="width:100%;">
                                <div v-for="(item,index) in datalistarr.dataarr" :key="index" style="display:flex;float: left;width:calc(100%/3);margin-top:20px;">
                                    <el-form-item label="" label-width="0px" style="flex:1;">
                                        <el-input v-model.number="item.number" @blur="chage_input" placeholder="请输入数量" ></el-input>
                                    </el-form-item>
                                        <i  v-if="datalistarr.dataarr.length-1 == index" class="el-icon-circle-plus tb_class" @click="addItem"></i>
                                        <i  v-else class="el-icon-delete-solid tb_class" @click="delectItem(index)"></i>
                                </div>
                                <div style="clear:both;"></div>
                            </div>
                        </el-form>     
                    </div>
             </div> 

                        
                <div style="text-align: center;width:100%;">
                        <el-button type="primary" style="width:250px;margin-top:50px;background: #F5CF49;border:none;" @click="qr_but1">确认</el-button>
                </div>
    
        </el-dialog> 

   </div>
</template>

<script>

export default {
   name: 'deliverydetailslist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        my_orderno:'',
        substitution_mtk:false,
        substitution_form:{
            gm:''
        },
        split_mtk:false,
        all_number:0,
        all_number1:0,
        all_gm:0,
        nums:0,
        datalistarr:{
            dataarr:[{"number":0}]
        },
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 253
     this.z_num()
  },
  mounted (){
    
  },
  methods: {
     z_num(){
          this.nums = this.datalistarr.dataarr.length 
    },
    addItem(){ //增加表单按钮
        this.datalistarr.dataarr.push({
        number:0
        })  
        this.z_num()
    },
    delectItem(index){ //删除表单按钮
        this.datalistarr.dataarr.splice(index, 1)
        this.chage_input()
        this.z_num()
    },
    chage_input(){
         let element = 0 
         for (let i = 0; i < this.datalistarr.dataarr.length; i++) {
                 if(this.datalistarr.dataarr[i].number >= 3500){
                      this.open1('单个输入不能超过3500','warning')
                      this.datalistarr.dataarr[i].number = 0
                 }else{
                       element += parseInt(this.datalistarr.dataarr[i].number);
                 }
               
          }
          this.all_number = element + this.all_gm
    },
   split_but(row){
      this.my_orderno = row.orderno
      this.all_number1 = row.final_price
      this.datalistarr={
            dataarr:[{"number":0}]
      }
      this.all_number=0
      this.all_gm=0
      this.z_num()
      this.split_mtk = true
  
   },
    qr_but1(){
                  
          let select_arr =[]

          for(let item of this.datalistarr.dataarr){
              select_arr.push(item.number)            
          }
         if(parseInt(this.all_number1) != parseInt(this.all_number)){
              this.open1('输入总价值整数与申请价值整数不等','warning')
          }else{
            console.log(select_arr)

              if(select_arr.length <1){
                  this.open1('分配不能小于一种','warning')
              }else{

                    this.post("/Statistics/exchange", {
                        orderno:this.my_orderno,
                        arr:select_arr,
                        kmb_number:this.all_gm
                    }).then(res => {  
                        console.log(res)
                        if(res.error_code == 0){
                            this.open1(res.result,'success')  //提示框
                            this.$emit('up_list_fun')
                            this.split_mtk = false
                            this.my_orderno =''
                        }else {
                            this.open1(res.message,'warning')
                        }

                    })

              }
                
         }
           


    },
    hf_but(row){
         this.$confirm('是否恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                        this.post("/Statistics/recoveryGoods", {
                            orderno:row.orderno,
                        }).then(res => {
                            if(res.error_code == 0){
                            this.open1(res.result,'success')  //提示框
                            this.$emit('up_list_fun')
                            }else {
                            this.open1(res.message,'warning')
                            }

                    })
                }).catch(() => {
                      
                });
    },
    sh_but(row){
        this.$confirm('是否收获', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                        this.post("/Statistics/deliveryGoods", {
                            orderno:row.orderno,
                        }).then(res => {
                            if(res.error_code == 0){
                            this.open1(res.result,'success')  //提示框
                            this.$emit('up_list_fun')
                            }else {
                            this.open1(res.message,'warning')
                            }

                    })
                }).catch(() => {
                      
                });
    },
    substitution_but(row){
         this.my_orderno = row.orderno
         this.substitution_form.gm = ''
         this.substitution_mtk = true     
    },
    substitution_but_qr(){
        this.post("/Statistics/goodsExchagneKmb", {
              orderno:this.my_orderno,
              kmb_number:this.substitution_form.gm
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.substitution_mtk = false     
                    this.$emit('up_list_fun')
                }else {
                this.open1(res.message,'warning')
             }

        })
    }

  }
}
</script>


<style scoped>
.demo{
    overflow-y:auto;
    height: 350px;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
</style>